<template>
  <div>
    <el-dialog
      title="承运商分配"
      v-if="showassigncarrier"
      :visible.sync="showDialog"
      append-to-body
      :close-on-click-modal="false"
      @close="close"
      width="80%"
    >
      <avue-crud
        :data="data"
        :option="option"
        :table-loading="showLoading"
        :page.sync="page"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
      >
        <template slot-scope="{ disabled, size }" slot="carrierGroupSearch">
          <avue-select
            v-model="query.carrierGroup"
            :disabled="disabled"
            :size="size"
            placeholder="请选择组别"
            :dic="dic"
            :props="{ label: 'name', value: 'name' }"
          ></avue-select>
        </template>
      </avue-crud>
      <div slot="footer">
        <el-button @click="close()">取消</el-button>
        <el-button @click="submit()" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <configDialog ref="configDialog" :limitdata="limitdata"></configDialog>
  </div>
</template>

<script>
import configDialog from "./configDialog.vue";
import { addbarrierlimit } from "@/api/inquiry/foreigntrade/index";
import { deepClone } from "@/util/util.js";
import { getList } from "@/api/inquiry/carrierDialog";
import { carrierGroup } from "@/api/basedata/carriers";
export default {
  components: {
    configDialog,
  },
  data() {
    return {
      showassigncarrier: true,
      showDialog: false,
      callback: () => {},
      dic: [],
      form: {},
      query: {},
      data: [{ carrierNum: "13123", name1: "承运商" }],
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1,
      },
      selectionList: [],
      limitdata: [],
      configData: {},
      rowdataid: null,
    };
  },
  computed: {
    option() {
      return {
        height: "260px",
        reserveSelection: true,
        columnBtn: false,
        searchShowBtn: true,
        refreshBtn: true,
        border: true,
        addBtn: false,
        searchMenuSpan: 6,
        menu: false,
        editBtn: false,
        indexFixed: false,
        selectionFixed: false,
        expandFixed: false,
        menuFixed: false,
        align: "center",
        headerAlign: "center",
        tip: false,
        selection: true,
        column: [
          {
            label: "业务伙伴编码",
            prop: "tmId",
            search: true,
            searchLabelWidth: 100,
          },
          {
            label: "名称",
            prop: "name",
            search: true,
          },
          {
            label: "组别",
            prop: "carrierGroup",
            search: true,
            searchRange: true,
          },
          {
            label: "区域（省份）",
            prop: "addressProvince",
          },
          {
            label: "城市",
            prop: "addressCity",
          },
          {
            label: "电话",
            prop: "phone",
            search: true,
          },
        ],
      };
    },
    isCheckbox() {
      return this.selectType === "checkbox";
    },
  },
  methods: {
    open(rowdata, { callback }) {
      this.callback = callback;
      this.showDialog = true;
      this.rowdataid = rowdata.id;
      this.showassigncarrier = true;
      carrierGroup().then((res) => {
        this.dic = res;
      });
      this.searchReset();
    },
    close() {
      this.selectionList = [];
      this.showDialog = false;
      this.showassigncarrier = false;
    },

    submit() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请至少选择一项");
        return;
      }
      addbarrierlimit().then((res) => {
        let dataarr = res.data.data;
        this.limitdata = dataarr;
        if (dataarr[3].dictValue < this.selectionList.length) {
          this.$message.warning(
            `超出最大可选择承运商数,仅可添加${dataarr[3].dictValue}条数据`
          );
          return;
        }
        this.$refs.configDialog.open(this.limitdata, {
          callback: (resdata) => {
            this.configData = resdata;
            let finalData = {
              selectionList: this.selectionList,
              configData: this.configData,
            };
            this.callback(deepClone(finalData));
            this.close();
          },
        });
      });
    },

    onLoad(page, params = {}) {
      let query = Object.assign(params, this.query);
      getList(page.currentPage, page.pageSize, query).then((res) => {
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      });
    },
    searchChange(params, done) {
      if (this.query.carrierGroup) {
        this.query = {
          ...params,
          carrierGroup: this.query.carrierGroup,
        };
      } else {
        this.query = params;
      }
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = { inquiryId: this.rowdataid };
      this.onLoad(this.page, this.query);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, this.query);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page, this.query);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    selectionChange(list) {
      this.selectionList = list.map((item) => item.tmId);
    },
  },
};
</script>

<style></style>
